<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-07 14:01:44
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-17 09:23:55
 * @FilePath: \vite-project\src\component\Common\Card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="card" :style="'background:' + props.bgColor + ';border-radius:' + props.border + 'px;'+'padding-bottom:' + props.padbottom+ 'px;'"
    :class="{ 'none-padding-box': props.none, 'none-top-margin': !props.top}">
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
interface PropsType {
  // 是否需要边距，默认为要
  none?: boolean
  // 自定义的背景色
  bgColor?: string
  // 是否有margin-top。，默认有
  top?: boolean
  // 是否需要边框。默认为10px
  border?: string
  // 是否有padding-bottom
  padbottom?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  none: false, // 默认值
  bgColor: '',
  top: true,
  border: '10',
  padbottom: '15',
})
</script>
<style lang="scss" scoped>
.card {
  background: #ffffff;
  margin-top: 15Px;
  padding: 15Px;
  border-radius: 10Px;
}
.none-padding-box{
  padding: 0;
}
.none-top-margin{
  margin-top: 0px;
}
</style>
